<template>
    <div>
        <button>Monday</button>
        <button id="a" onclick="func" ><div></div></button>
    <h3>标签的属性在vue的存在是props和v-bind和：</h3>
    <h3>标签的事件在vue的存在是methods和v-on和@ </h3>
    <h3>标签的子标签在vue的存在是slot </h3>
        <el-button type="danger" @click="go()">wangwu</el-button>
        <span>{{sampleD.toUpperCase()}}</span>
        <span>{{sampleD}}</span>
        <el-button :type="colors[0]">颜色</el-button>
        <el-button :type="colors[1]">颜色</el-button>
        <el-button :type="colors[2]">颜色</el-button>
        <el-button :type="colors[3]">颜色</el-button>
<!--      包含关系 父标签 是代码调用端 子标签是代码被调用端-->
        <div>
            <el-button @click="shift1">按照path跳转页面带参数</el-button>

        </div>
    </div>
</template>

<script>
  // import New from './components/New.vue';
  export default {

    name: "Monday",
    components: {
      // New,Old,
    },
    props: {
      sampleP: {
        type: Number,
        default: 0
      },
    },
    data() {
      return {
        sampleD: "value",
        colors:[
          "success","primary","warning","danger"
        ]
      };
    },
    computed: {
      // sampleC() {
      //     return this.sampleD+'--';
      // }
    },
    created() {
    },
    mounted() {
    },
    methods: {
      sampleM() {
      //  月亮走我也走
      //  a=12 b=a+3  b=15  b=20
      // 一个被观察者 两个观察者 二级观察者
      },
      go(num) {
       this.sampleD+="s"

      },
      shift1(){
        this.$router.push({
          path:"/october",
          query:{
            username:"lisi",
            age:8
          }
        })
      },

    },
    watch: {
      // sampleC(newValue, oldValue) {
      //
      // }
    },
  };
</script>

<!--<style scoped>-->
<style lang='scss' scoped>

</style>